<template>
  <div class="post-detail-container">
    <el-card v-if="post">
      <template #header>
        <div class="header-content">
          <span>帖子详情</span>
          <el-button @click="$router.back()">返回</el-button>
        </div>
      </template>

      <div class="post-content">
        <h2>{{ post.title }}</h2>
        <div class="meta">
          <span>作者：{{ post.username }}</span>
          <span>发布时间：{{ formatDate(post.createdTime) }}</span>
          <span>评论数：{{ post.comment_count }}</span>
        </div>
        <div class="content">{{ post.content }}</div>
      </div>

      <div class="comment-section">
        <h3>评论列表</h3>
        <div class="comment-list">
          <div
            v-for="comment in comments"
            :key="comment.id"
            class="comment-item"
          >
            <div class="comment-header">
<!--              <span class="username">{{ comment.username }}</span>-->
              <span class="time">{{ formatDate(comment.createTime) }}</span>
            </div>
            <div class="comment-content">{{ comment.content }}</div>
          </div>
        </div>

        <div class="comment-form">
          <el-input
            v-model="commentContent"
            type="textarea"
            :rows="3"
            placeholder="写下你的评论..."
          />
          <el-button
            type="primary"
            @click="handleComment"
            :loading="commenting"
          >
            发表评论
          </el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { faker } from '@faker-js/faker'
import {createComment, getPostComments, getPostDetail} from "@/api/forum.js";
import {getUserInfo} from "@/utils/auth.js";

const route = useRoute()

// 帖子详情
const post = ref(null)

// 评论相关
const comments = ref([])
const commentContent = ref('')
const commenting = ref(false)

// 格式化日期
const formatDate = (date) => {
  return new Date(date).toLocaleString()
}

// 加载帖子详情
const loadPost = async () => {
  const postId = route.params.id
  // TODO: 调用帖子详情API
  const result = await getPostDetail(postId)
  post.value = result.data
}

// 加载评论列表
const loadComments = async () => {
  const result = await getPostComments(route.params.id)
  comments.value = result.data
}

// 发表评论
const handleComment = async () => {
  if (!commentContent.value.trim()) {
    ElMessage.warning('请输入评论内容')
    return
  }

  commenting.value = true
  try {
    // TODO: 调用评论API
    await createComment({
      userId: getUserInfo().userId,
      postId: route.params.id,
      content: commentContent.value
    })
    ElMessage.success('评论成功')
    commentContent.value = ''
    await loadComments()
  } catch (error) {
    console.error('评论失败:', error)
  } finally {
    commenting.value = false
  }
}

onMounted(() => {
  loadPost()
  loadComments()
})
</script>

<style scoped>
.post-detail-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.post-content {
  margin-bottom: 30px;
}

.post-content h2 {
  margin: 0 0 15px 0;
  color: #303133;
}

.meta {
  color: #909399;
  font-size: 14px;
  margin-bottom: 20px;
}

.meta span {
  margin-right: 15px;
}

.content {
  color: #606266;
  line-height: 1.8;
}

.comment-section {
  border-top: 1px solid #ebeef5;
  padding-top: 20px;
}

.comment-section h3 {
  margin: 0 0 20px 0;
  color: #303133;
}

.comment-list {
  margin-bottom: 20px;
}

.comment-item {
  padding: 15px 0;
  border-bottom: 1px solid #ebeef5;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-header {
  margin-bottom: 10px;
}

.username {
  color: #409EFF;
  font-weight: bold;
  margin-right: 10px;
}

.time {
  color: #909399;
  font-size: 14px;
}

.comment-content {
  color: #606266;
  line-height: 1.6;
}

.comment-form {
  margin-top: 20px;
}

.comment-form .el-button {
  margin-top: 10px;
  float: right;
}
</style>
